<template>
	<view class="department-container" @touchmove.stop.prevent="() => {}">
		<div class="my_work_box" id="myworkbox">
			<image src="/static/back.png" style="width: 24px;height: 24px;position: left;margin-left: 5%;"
				@click="backLayout()"></image>
			<div class="titlebox">
				<text style="color: black;font-size: 16px;">{{encyclopediaData.name}}</text>
			</div>
			<div style="position: right;margin-right: 13%"></div>
		</div>
		<scroll-view class="list_box" scroll-y="true" show-scrollbar="false">
			<view class="department-header">
				<view class="logo-container">
					<image class="department-logo" :src="'https://127.0.0.1'+encyclopediaData.src" mode="widthFix"
						alt="部门logo">
					</image>
				</view>
				<view class="department-title">
					<text class="main-title">{{ encyclopediaData.name }}</text>
				</view>
			</view>
			<view class="section intro-section">
				<view class="section-title">
					<text>部门简介</text>
				</view>
				<view class="section-content">
					<text class="intro-text">{{ encyclopediaData.intro }}</text>
				</view>
			</view>

			<template v-for="item in encyclopediaOtherData">
				<view class="section business-section" v-if="item.type==='CardIntroduce'">
					<view class="section-title">
						<text>{{item.title}}</text>
					</view>
					<view class="business-list">
						<view class="business-card" v-for="(items, index) in item.CardIntroduceItems" :key="index">
							<view class="business-header">
								<view class="business-badge"></view>
								<text class="business-name">{{ items.name }}</text>
							</view>
							<text class="business-desc">{{ items.desc }}</text>
						</view>
					</view>
				</view>

				<!-- 公众平台 -->
				<view class="section platform-section" v-if="item.type==='PublicPlatform'">
					<view class="section-title">
						<text>{{item.title}}</text>
					</view>
					<view class="platform-content">
						<view class="wechat-platform">
							<image class="wechat-qrcode" :src="'https://127.0.0.1'+item.mainicon" mode="widthFix"></image>
							<view class="wechat-info">
								<text class="wechat-name">{{ item.wechatName }}</text>
								<text class="wechat-desc">扫码关注获取更多资讯</text>
							</view>
						</view>
						<view class="other-platforms">
							<view class="platform-item" v-for="(platform, index) in item.otherPlatforms" :key="index">
								<icon :type="platform.icon" size="24" color="#1A56DB"></icon>
								<text class="platform-name">{{ platform.name }}</text>
								<text class="platform-account">{{ platform.account }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 基本介绍框 -->
				<view class="section intro-section" v-if="item.type==='BasicIntroduce'">
					<view class="section-title">
						<text>{{item.title}}</text>
					</view>
					<view class="section-content">
						<text class="intro-text">{{item.intro}}</text>
					</view>
				</view>

				<!-- 办公地点 -->
				<view class="section location-section" v-if="item.type==='ChatInformation'">
					<view class="section-title">
						<text>{{item.title}}</text>
					</view>
					<view class="location-content">
						<view class="location-item" v-if="item.officeLocation!=''">
							<icon type="location" size="24" color="#FF7D00"></icon>
							<text class="location-text">{{ item.officeLocation }}</text>
						</view>
						<view class="location-item" v-if="item.officePhone!=''">
							<icon type="phone" size="24" color="#FF7D00"></icon>
							<text class="location-text">{{ item.officePhone }}</text>
						</view>
						<view class="location-item" v-if="item.officeHours!=''">
							<icon type="clock" size="24" color="#FF7D00"></icon>
							<text class="location-text">{{ item.officeHours }}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="footer">
				<text class="copyright">免责声明</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				encyclopediaData: [],
				encyclopediaOtherData: [],
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			})
			const encyclopediaDataStr = decodeURIComponent(options.encyclopediaData);
			this.encyclopediaData = JSON.parse(encyclopediaDataStr);
			this.getintroData()
		},

		methods: {
			getintroData(){
				var localurl="https://127.0.0.1"+this.encyclopediaData.moreinfo
				uni.request({
					url: localurl,
					success: res => {
						if (res.statusCode === 404) {
							internetCode = 404
						} else {
							this.encyclopediaOtherData = res.data.encyclopediaOtherData;
							uni.hideLoading()
							console.log(res.data.encyclopediaOtherData)
						}
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '加载失败',
							icon: 'error',
							duration: 2000
						})
						console.log(err);
					}
				});
			},
			backLayout() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.redirectTo({
						url: '/pages/encyclopedia/encyclopediaList'
					});
				}
			},
		}
	};
</script>

<style scoped>
	/* 全局样式 */
	.department-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	template {
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		overflow: hidden;
	}

	.titlebox {
		top: 0;
		position: relative;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		letter-spacing: 1px;
		margin: 0 auto;
	}

	.my_work_box {
		margin: 13% 0 4% 0;
		display: flex;
		flex-direction: row;
		align-items: left;
		overflow: hidden;
	}

	.list_box {
		height: calc(100vh - 130px);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		align-items: center;
	}


	/* 导航栏样式 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	/* 部门头部信息 */
	.department-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24px 16px;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.logo-container {
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
		border-radius: 8px;
		overflow: hidden;
		background-color: #f0f0f0;
	}

	.department-logo {
		width: 100%;
		height: 100%;
	}

	.department-title {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.main-title {
		font-size: 22px;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	}

	.sub-title {
		font-size: 14px;
		color: #666;
	}

	/* 通用区块样式 */
	.section {
		background-color: #ffffff;
		margin-bottom: 10px;
		padding: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid #eee;
	}

	.intro-section .section-content {
		padding: 0 4px;
	}

	.intro-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	.business-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.business-card {
		background-color: #f9f9f9;
		border-radius: 6px;
		padding: 14px;
		transition: transform 0.2s ease;
	}

	.business-card:active {
		transform: scale(0.98);
	}

	.business-header {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
	}

	.business-badge {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #1A56DB;
		margin-right: 8px;
	}

	.business-name {
		font-size: 15px;
		font-weight: 500;
		color: #333;
	}

	.business-desc {
		font-size: 12px;
		color: #666;
		line-height: 1.5;
	}

	/* 公众平台 */
	.platform-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.wechat-platform {
		display: flex;
		align-items: center;
		padding: 8px 0;
	}

	.wechat-qrcode {
		width: 100px;
		height: 100px;
		margin-right: 16px;
		border: 1px solid #eee;
		padding: 4px;
	}

	.wechat-info {
		flex: 1;
	}

	.wechat-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 8px;
	}

	.wechat-desc {
		font-size: 13px;
		color: #666;
	}

	.other-platforms {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.platform-item {
		display: flex;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.platform-item:last-child {
		border-bottom: none;
	}

	.platform-item icon {
		margin-right: 12px;
	}

	.platform-name {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin-right: 8px;
	}

	.platform-account {
		font-size: 13px;
		color: #666;
		flex: 1;
		text-align: right;
	}

	/* 办公地点 */
	.location-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.location-item {
		display: flex;
		align-items: flex-start;
	}

	.location-item icon {
		margin-right: 12px;
		margin-top: 2px;
		color: #FF7D00;
	}

	.location-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		flex: 1;
	}

	/* 底部版权信息 */
	.footer {
		padding: 16px;
		background-color: #f5f7fa;
		margin-top: auto;
	}

	.copyright {
		font-size: 12px;
		color: #999;
		text-align: center;
		display: block;
	}

	/* 适配不同屏幕尺寸 */
	@media (max-width: 320px) {
		.business-name {
			font-size: 13px;
		}

		.business-desc {
			font-size: 11px;
		}
	}

	@media (min-width: 414px) {
		.section {
			padding: 20px;
		}

		.business-grid {
			gap: 20px;
		}
	}
</style>